<template>
  <div id="index">
    <div class="titleTop">
      <div class="titleLeft">
        <i class="iconfont icontongyong_dangqianweizhi"></i>
        <span>首页</span>
      </div>
    </div>
    <div class="index-left">
      <div class="project">
        <div class="first relative">
          <h3>执行中项目</h3>
          <article class="absoulte">
            <p v-for="(item, index) in projectStatus" :key="index">{{item.projectName}}</p>
          </article>
        </div>
        <div class="sec">
          <h3>应收账款</h3>
          <article>
            <p>
              <i class="iconfont iconlishizhangmu"></i>
              <span>{{receiveStatus.total}}</span>笔
            </p>
            <p>
              <i class="iconfont iconjinbi"></i>
              <span>{{receiveStatus.receiveAmount}}</span>亿元
            </p>
          </article>
        </div>
        <div class="three">
          <h3>执行中项目</h3>
          <article>
            <p>
              计划投放：
              <span>{{marketStatus[0].value}}</span>亿元
            </p>
            <p>
              已 投 放：
              <span>{{marketStatus[1].value}}</span>亿元
            </p>
          </article>
        </div>
      </div>
      <h2>项目进度</h2>
      <section class="part" v-for="(item, index) in projects" :key="index">
        <p>{{item.title}}</p>
        <el-form class="secproject" :model="item.secdata">
          <el-form-item
            :style="{backgroundColor: secitem.color}"
            v-for="(secitem, secindex) in seclist"
            :key="secindex"
            :prop="secitem.prop"
            :label="secitem.label"
          >{{item.secdata[secitem.prop]}}</el-form-item>
        </el-form>
        <el-form label-width="140px" class="thrproject" :model="item.thrdata">
          <el-form-item
            v-for="(thritem, thrindex) in thrlist"
            :key="thrindex"
            :prop="thritem.prop"
            :label="thritem.label"
          >
            <el-progress
              :text-inside="true"
              :stroke-width="18"
              :percentage="item.thrdata[thritem.prop]"
              color="#59A2FC"
            ></el-progress>
          </el-form-item>
        </el-form>
      </section>
    </div>
    <div class="index-right">
      <aside>
        <h3>待办事项</h3>
        <ul>
          <li v-for="(item, index) in things" :key="index">
            <p>{{item.content}}</p>
            <el-button type="warning">审批</el-button>
          </li>
        </ul>
      </aside>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      projects: [
        {
          title: "1.华西证券-佳源-某某供应链金融1期 资产支持专项计划",
          secdata: { name: "￥4.5亿", one: '52笔', two: '2笔', three: '￥3亿', four: '2019-12-11'},
          thrdata: { one: '85', two: '5', three: '30', four: '10' }
        },
        {
          title: "2.长江楚越-苏宁（1-10）期供应链金融资产支持专项计划",
          secdata: { name: "￥5.4亿", one: '30笔', two: '5笔', three: '￥2.5亿', four: '2020-2-19' },
          thrdata: { one: '95', two: '13', three: '60', four: '33' }
        }
      ],
      seclist: [
        { label: "储架额度：", prop: "name", color: "#DBEDF9" },
        { label: "对应应收账款：", prop: "one", color: "#DEF1DB" },
        { label: "合格资产入池：", prop: "two", color: "#F3DEDE" },
        { label: "一期专项计划：", prop: "three", color: "#FCF8E5" },
        { label: "预计专项计划到期日：", prop: "four", color: "#B0FDF4" }
      ],
      thrlist: [
        { label: "收集归档比例：", prop: "one" },
        { label: "入池比例：", prop: "two" },
        { label: "合格资产比例：", prop: "three" },
        { label: "投放比例：", prop: "four"}
      ],
      things: [
        { content: "1.王小明  新增了项目“xxxx资产专项计划” " },
        { content: "2.王小明  修改了“xxxx资产专项计划”的项目    组成员" },
        { content: "3.“整整网络科技有限公司”  上传了公司证照      文件" }
      ],
      projectStatus: [],
      marketStatus: [
        {
          type: "计划投放",
          value: 0
        },
        {
          type: "已经投放",
          value: 0
        }
      ],
      receiveStatus: {}
    };
  },
  created() {
    this.getdata();
  },
  methods: {
    getdata() {
      this.axios.get("AdminAPI/project/home").then(({ data }) => {
        this.projectStatus = data.data.projectStatus;
        this.marketStatus = data.data.marketStatus;
        this.receiveStatus = data.data.receiveStatus;
      });
    }
  }
};
</script>
<style lang="scss">
#index {
  .titleTop {
    margin-bottom: 20px;
    background: white;
    padding: 12px;
  }
  h2 {
    background: #e2eefd;
    padding: 12px;
    border-radius: 5px;
  }
  .part {
    width: 95%;
  }
  .secproject {
    display: flex;
    flex-wrap: wrap;
    width: 60%;
    margin: 50px auto;
    justify-content: center;
    .el-form-item {
      width: 20%;
      padding-left: 15px;
      margin-right: 6%;
      text-align: center;
      border-radius: 6px;
    }
    .el-form-item:nth-child(4),
    .el-form-item:last-child {
      width: 42%;
      margin-right: 4%;
    }
    .el-form-item:last-child {
      margin-right: 0;
    }
  }
  .thrproject {
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      width: 40%;
      margin-right: 4%;
      .el-progress {
        display: inline;
      }
      .el-progress-bar__inner,
      .el-progress-bar__outer {
        border-radius: 0;
      }
    }
  }
  .index-left {
  }
  .index-right {
    display: none;
  }
  .relative {
    position: relative;
    .absoulte {
      position: absolute;
      left: 0;
      right: 0px;
      padding-left: 40px;
      padding-right: 20px;
      box-sizing: border-box;
      top: 68px;
      bottom: 0;
      overflow: auto;
      &::-webkit-scrollbar {
        display: none;
      }
    }
  }
}
</style>
